<template>
	<view>
		<view class="title">注册</view>
		<view class="loginform">
			<view class="loginform-item">
				<text class="number-title">+86</text>
				<image class="down-icon" src="../../static/down.png">
					<input maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholderClass"
						v-model="mobile" />
			</view>
			<view class="loginform-item">
				<input class="textleft" v-model="password" password placeholder="请输入密码"
					placeholder-class="placeholderClass" />
			</view>
			<view class="loginform-yzm">
				<input class="textleft" v-model="code" placeholder="请输入验证码" placeholder-class="placeholderClass" />
				<text v-show="isVisable" @click="getCode">获取验证码</text>
			</view>

			<view class="btnbox">
				<button @click="register">注册</button>
			</view>
		</view>
		<view class="rule">
			<label class="radio">
				<radio value="r1" color="#37C2BC" checked="" />选中
			</label>
			<text>进入即代表同意</text>
			<text class="blue" @click="kf(1)">商家协议</text>和<text class="blue" @click="kf(2)">隐私协议</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				isVisable: true,
				password: '',
				code: '',
			}
		},

		onLoad(option) {


		},
		methods: {


			kf(type) {

				if (type == 1) {
					uni.navigateTo({
						url: '../usercenter/kf?url=' + encodeURIComponent(
							"https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				} else {
					uni.navigateTo({
						url: '../usercenter/kf?url=' + encodeURIComponent(
							"https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				}


			},
			getCode() {
				let param = {
					mobile: this.mobile,
					type: 'register'
				}
				let that = this;
				this.$api.sendMessage(param).then(res => {

					if (res.code == 1) {
						that.$util.$showToast('发送成功', '', 'none');
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
				})
			},
			register() {

				if (this.mobile == '') {
					this.$util.$showToast('手机号不能为空', '', 'none');
					return;
				}
				if (this.password == '') {
					this.$util.$showToast('密码不能为空', '', 'none');
					return;
				}
				if (this.code == '') {
					this.$util.$showToast('验证码不能为空', '', 'none');
					return;
				}
				if (this.refMobile == '') {
					this.$util.$showToast('推荐人手机号不能为空', '', 'none');
					return;
				}
				let param = {
					mobile: this.mobile,
					password: this.password,
					code: this.code,
				}
				let that = this;
				this.$api.register(param).then(res => {

					if (res.code == 1) {
						let token = res.data.token;
						that.$util.$setStorageSync("token", token);
						uni.redirectTo({
							url: '../usercenter/shangjia'
						})
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title {
		margin: 62rpx 94rpx;
		font-size: 54rpx;
		color: $uni-text-color;
	}

	.loginform {
		margin: 95rpx 95rpx;

		.loginform-item {
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			height: 135rpx;
			line-height: 135rpx;

			.down-icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 52rpx;
				margin-right: 20rpx;
			}

			.number-title {
				font-size: 30rpx;
				color: #666666;
			}

			input {
				margin-top: 52rpx;
				text-align: center;
				font-size: 32rpx;
				color: #454545;
			}

			.textleft {
				text-align: left;
			}
		}

		.loginform-yzm {
			display: flex;
			border-bottom: 1rpx solid #EFEFEF;
			height: 135rpx;
			line-height: 135rpx;

			input {
				margin-top: 52rpx;
				font-size: 32rpx;
				flex: auto;
				font-size: 30rpx;
			}

			text {
				color: #37C2BC;
				font-size: 30rpx;
			}
		}
	}

	.rule {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		text-align: center;
		color: $uni-text-color-grey;
		font-size: 24rpx;

		text {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		.blue {
			color: $uni-color-primary;
			text-decoration: underline;
			margin-left: 10rpx;
		}
	}

	.btnbox {
		margin-top: 69rpx;
	}
</style>
